<template>
	<div>
		<!--头部搜索-->
		<el-row>
			<el-col :span="8"><label>请输入用户名</label></el-col>
			<el-col :span="8"><el-input v-model="searchName"></el-input></el-col>
			<el-col :span="8">
				<el-button type="danger" size="large" @click="loadUserList()">搜索</el-button>
				<el-button type="primary" size="large" @click="showAddDialog()">添加用户</el-button>
			</el-col>
		</el-row>
		<!--添加用户对话框-->
		<!--v-model=false:不显示该弹窗，true:显示该弹窗，title:弹窗标题-->
		<el-dialog v-model="showAddPage" title="添加用户">
			<el-form :model="addForm">
				<el-form-item label="用户名">
					<el-input v-model="addForm.uname"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="addForm.upwd" type="password"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="showAddPage =false">取消</el-button>
				<el-button type="primary" @click="addUser()">确定</el-button>
			</template>
		</el-dialog>
		<!--修改用户对话框-->
		<!--v-model=false:不显示该弹窗，true:显示该弹窗，title:弹窗标题-->
		<el-dialog v-model="showEditPage" title="修改用户">
			<el-form :model="editForm">
				<el-form-item label="用户id">
					<el-input v-model="editForm.uid"></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="editForm.uname" readonly></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="editForm.upwd" type="password"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="showEditPage =false">取消</el-button>
				<el-button type="primary" @click="updateUser()">确定</el-button>
			</template>
		</el-dialog>
		<!--数据表格-->
		<!--:data=数据名称-->
		<el-table :data="userList">
			<!-- prop=“后端传入的对象的字段名”-->
			<el-table-column prop="uid" label="用户编号" width="200"></el-table-column>
			<el-table-column prop="uname" label="用户名" width="200"></el-table-column>
			<el-table-column prop="ustatus" label="状态值" width="200">
				<template #default="scope">
					<el-tag :type="scope.row.ustatus===0?'success':'danger'">
						{{scope.row.ustatus ===0?'启用':'禁用'}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="right" label="操作" width="150">
				<template #default="scope">
					<el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="deleteUser(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="pageination.page" :page-sizes="[5, 10, 20, 30]" :page-size="pageination.limit"
			layout="total, sizes, prev, pager, next, jumper" :total="pageination.total">
		</el-pagination>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		useUserInfoStore
	} from '../pinia/userinfo'
	export default {
		data() {
			return {
				userList: [], //用户列表
				searchName: '', //双向绑定搜索框
				axiosHeader: { //请求头
					token: "",
					uname: ""
				},
				showAddPage: false, //添加框是否显示
				showEditPage: false, //编辑框是否显示
				addForm: { //添加框对象
					uname: "",
					upwd: ""
				},
				editForm: { //编辑框对象
					uid: -1,
					uname: "",
					upwd: ""
				},
				pageination: { //分页对象
					page: 1, //当前页码
					limit: 10, //每页行数
					total: 0 //总行数
				}
			}
		},
		created() {
			//页面加载的时候 将前面登录的对象 传过来
			const userStore = useUserInfoStore();
			this.axiosHeader.uname = userStore.getUsername
			this.axiosHeader.token = userStore.getToken
			this.loadUserList() //页面加载的时候 获取数据
		},
		methods: {
			//请求数据列表（获取用户列表）
			loadUserList() {
				var that = this
				const params = { //向后端请求发送的参数
					uname: that.searchName, //从搜索框中获取数据
					page: that.pageination.page, //页码（从分页器中获取）
					limit: that.pageination.limit //每页行数（从分页器中获取）
				}
				axios.get(that.$baseUrl.SPRURL + "v2/user/user", {
					headers: that.axiosHeader, //请求头
					params: params //向后端传入的参数
				}).then(res => {
					that.userList = res.data.data //将请求回来的数据存入list中
					that.pageination.total = res.data.count //将总数存入分页器中
				}).catch(res => {
					console.log(JSON.stringify(res))
				})
			},
			handleSizeChange(val) { //修改每页行数
				this.pagination.limit = val
				this.loadUserList()
			},
			handleCurrentChange(val) { //修改页码
				this.pagination.page = val
				this.loadUserList()
			},
			showAddDialog() { //显示添加页面
				this.showAddPage = true //显示页面
				this.addForm = { //数据清空
					uname : '',
					upwd : ''
				}
			},
			/**
			 * @param {Object} row 当前待修改的行
			 */
			showEditDialog(row) { //显示修改页面
				this.showEditPage = true
				this.editForm = {
					uid: row.uid,
					uname: row.uname,
					upwd: row.upwd
				}
			},
			addUser() {
				var that = this
				axios.post(that.$baseUrl.SPRURL + "v2/user/user", that.addForm, {
					headers: that.axiosHeader
				}).then(res => {
					if (res.data.code == 0) {
						that.$message.success("添加成功！") //弹窗
						that.showAddPage = false //关闭弹窗
						that.loadUserList() //刷新数据
					} else {
						that.$message.success("添加失败！") //弹窗
					}
				}).catch(res => {
					that.$message.success("添加失败！") //弹窗
				})
			},
			updateUser() {
				var that = this
				axios.put(that.$baseUrl.SPRURL + "v2/user/user", that.editForm, {
					headers: that.axiosHeader
				}).then(res => {
					if (res.data.code == 0) {
						that.$message.success("修改成功！") //弹窗
						that.showEditPage = false //关闭弹窗
						that.loadUserList() //刷新数据
					} else {
						that.$message.success("修改失败！") //弹窗
					}
				}).catch(res => {
					that.$message.success("修改失败！") //弹窗
				})
			},
			/**
			 * @param {Object} index 当前选中行的索引
			 * @param {Object} row 当前选中行的数据
			 */
			deleteUser(index, row) {
				var that = this
				that.$confirm('确定要删除该用户吗？', '提示', {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: 'warning'
				}).then(() => { //点击确定
					axios.delete(that.$baseUrl.SPRURL + "v2/user/user/" + row.uid, {
						headers: that.axiosHeader
					}).then(res => {
						if (res.data.code == 0) {
							that.$message.success("修改成功！") //弹窗
							that.showEditPage = false //关闭弹窗
							that.loadUserList() //刷新数据
						} else {
							that.$message.success("修改失败！") //弹窗
						}
					}).catch(res => {
						that.$message.success("修改失败！") //弹窗
					})
				}).catch(() => { //点击了取消
					that.$message.info("取消删除")
				})

			}
		}
	}
</script>